<template>
  <div class="bg_F4F6F9 login_page">
    <div class="register_second_box">
    <div class="login_body bg_fff">
      <!--top-->
      <div class="login_top row">
        <div class="login_title col-md-6 font_18 col_2577EF text-left">注册</div>
        <div class="register_btn col-md-6 font_14 col_666 text-right pointer" @click="to_login">
          登陆<span class="glyphicon glyphicon-play font_12" aria-hidden="true"></span>
        </div>
      </div>
      <!--列表表单-->
      <ul class="login_form_list clear">
        <li class="text-left clear">
          <div class="form_list_label float_left">手机号码</div>
          <div class="form_list_input float_left"><input type="text" id="phone_num" class="col_aaa tel_inp" placeholder="今后可以用手机号码登录"></div>
        </li>
        <li class="text-left clear">
          <div class="form_list_label float_left">短信验证码</div>
          <div class="form_qrcode_input float_left"><input type="number" class="col_aaa phone_qrcode" placeholder="请填写短信验证码"></div>
          <div class="qrcode_btn_box font_14 float_left">
            <button type="button" class="qrcode_btn col_2577EF" @click="message_qrcode($event)">获取验证码</button>
            <span class="count_down_num col_666"></span>
          </div>
        </li>
        <li class="text-left clear">
          <div class="form_list_label float_left">设置密码</div>
          <div class="form_password_input float_left">
            <input type="password" class="col_aaa password_inp" minlength="6" maxlength="16" placeholder="6-16位字符">
          </div>
          <div class="password_box_width text-right font_14 float_left">
            <span class="glyphicon icon_hide_password" aria-hidden="true" @click="hide_password" v-if="eye_show"></span>
            <span class="glyphicon icon_show_password" aria-hidden="true" @click="show_password" v-else></span>
          </div>
        </li>
      </ul>
      <div class="err_form_text font_16 color_FF5151 margin_top_10" id="err_txt"></div>
      <button type="button" class="login_btn register_btn bg_2577EF font_16 col_fff margin_top_10" @click="register_sub">注册</button>
      <div class="checkbox">
        <label class="col_999 font_12">
          <input type="checkbox" checked class="checkbox_inp">已阅读并同意遵守
          <span></span>
        </label>
        <router-link to="/protocol">《学妹用户协议》</router-link>
      </div>
    </div>
    </div>
    <!--底部页脚-->
    <smFoot></smFoot>
  </div>

</template>

<script>
  import smFoot from '@/components/foot/sm_foot'
  //抛出
  export default {
    name: 'login',
    data(){
        return{
            eye_show:true
        }
    },
    //注册组件
    components:{
        smFoot
    },
    methods: {
        //点击登陆跳转
      to_login(){
          window.location.href = 'http://cas.xuemei99.com/web/cas/login?service=https%3A%2F%2Fwww.xuemei99.com%2Fweb%2Flogin%2F%3Fnext%3D%252F'
      },
      //短信验证码
      message_qrcode(e){
          let obj = window.event || e;
          let event_target = obj.target || obj.srcElement;
        let that = this;
        let countdown = 60;
        let phone_num = $("#phone_num").val();
        that.base.ajax_post("/site/get/msg/code", {"phone": phone_num, "type": 0}, function (data) {
          if (data.status == 0) {
            /**
             * 请求成功，倒计时开始
             * **/
            settime(obj);
            function settime() {
              if (countdown == 0) {
                $(event_target).attr("disabled", false).text("获取验证码").removeClass("bg_B1B3B5").addClass("bg_2577EF");
                //按钮失效
                $(event_target).attr("disabled", false);
                countdown = 60;
                return;
              } else {
                $(event_target).attr("disabled", true).text(countdown + "s").removeClass("bg_2577EF").addClass("bg_B1B3B5");
                countdown--;
              }
              setTimeout(function () {
                settime(obj)
              }, 1000)
            }
          } else {
            alert(data.detail)
          }
        });
      },

      //显示密码
      hide_password(){
          this.eye_show = false;
          $(".password_inp").attr("type","text");
      },

      //隐藏密码
      show_password(){
          this.eye_show = true;
          $(".password_inp").attr("type","password");
      },


      //注册提交
      register_sub(){
        let that = this;
        let tel_inp = $(".tel_inp").val();
        let phone_qrcode = $(".phone_qrcode").val();
        let password_val = $(".password_inp").val();
        let regx = /[\u4E00-\u9FA5]/;//匹配中文正则
        let regx_s = /^\s+|\s+$/g;//匹配空格
        if (this.checkStringNull(tel_inp)) {
          $("#err_txt").text("手机号码不能为空！");
        } else if (this.checkStringNull(phone_qrcode)) {
          $("#err_txt").text("短信验证码不能为空！");
        } else if (this.checkStringNull(password_val)) {
          $("#err_txt").text("密码不能为空！");
        } else if (regx.test(password_val)) {
          $("#err_txt").text("不能使用中文！");
        } else if (regx_s.test(password_val)) {
          $("#err_txt").text("不能使用空格！");
        } else if (!$(".checkbox_inp[type='checkbox']").is(':checked')) {
          $("#err_txt").text("请勾选协议！");
        } else {
          $("#err_txt").text("");
          /**
           * 验证完成提交表单并跳转
           * **/
          that.base.ajax_post('/site/new/register', {"phone":tel_inp,"password":password_val,"code":phone_qrcode}, function (data) {
            if (data.status == 0) {
                window.location.href = 'http://cas.xuemei99.com/web/cas/login?service=https%3A%2F%2Fwww.xuemei99.com%2Fweb%2Flogin%2F%3Fnext%3D%252F'
//              that.$router.push({path: '/login'})
            } else {
              alert(data.detail)
            }
          })
        }
      }
    },
    //在模板渲染之前调用
    created (){

    },
    //在模板渲染之后调用
    mounted () {
        //计算视窗高
        let window_height = document.documentElement.clientHeight;
        $("body").css({"height":window_height,"backgroundColor":"#F4F6F9"});
    },
  }


</script>

<style scoped>
  .login_page{
    border: 1px solid rgba(255,255,255,0);
  }
  .register_second_box{

  }
  .login_top{
    margin: 0;
  }
  .login_title,.register_btn{
    padding: 0;
  }
  .register_btn a{
    color: #666666;
  }
  .login_body{
    position: relative;
    width: 380px;
    height: 430px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0px 2px 8px #D8DBE2;
  }
  .login_form_list{
    margin: 0;
    padding: 0;
  }
  .login_form_list li{
    width: 100%;
    border-bottom: 1px solid #EAECEF;
    margin-top: 35px;
    padding-bottom: 10px;
    position: relative;
  }
  .form_list_label{
    width: 86px;
    font-size: 14px;
  }
  .form_list_input{
    width: calc(100% - 86px);
  }
  .form_list_input input{
    border: none;
    outline: none;
  }
  .form_qrcode_input{
    width: calc(100% - 140px);
  }
  .form_qrcode_input input{
    border: none;
    outline: none;
  }
  .qrcode_btn_box{
    width: 100px;
    position: absolute;
    right: -30px;
    z-index: 999;
  }
  .qrcode_btn{
    background: none;
    padding: 0;
  }
  .password_box_width{
    width: 54px;
  }
  .form_password_input{
    width: calc(100% - 140px);
  }
  .form_password_input input{
    border: none;
    outline: none;
  }
  .err_form_text{
    height: 40px;
    line-height: 40px;
  }
  .login_btn{
    border-radius: 4px;
    width: 320px;
    height: 48px;
    line-height: 48px;
  }

  .checkbox{
    position: relative;
    padding-left: 20px;
  }
  .checkbox a{
    font-size: 12px;
  }
  .checkbox .checkbox_inp {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
  }
  .checkbox {
    /*color: #999999;*/
  }
  .checkbox span {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid #999999;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-image: url("http://image.xuemei99.com/selected_icon_land.png");
    display: inline-block;
    background-position-x: 0px;
    background-position-y: 13px;
    position: absolute;
    left: 60px;
    top: 3px;
  }
  .checkbox .checkbox_inp:checked~span{
    background-position: 0 0px;
    border: none;
  }


</style>
